<template>
  <div class="app-container">
    <!-- 表格上方按钮 -->
    <div>
      <!-- <div style="float: left; margin-bottom: 10px">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="preAdd"
          >新增</el-button
        >
      </div> -->
      <right-toolbar
        @queryTable="getBannerList"
        style="float: right"
      ></right-toolbar>
    </div>
    <!-- 信息列表，包括：id、title、imageUrl、linkUrl、sort、gmt_create、gmt_modified -->
    <div style="float: left; width: 100%">
      <el-table
        border
        v-loading="listLoading"
        :header-cell-style="{ background: '#FAFAFA' }"
        :data="bannerList"
        style="width: 100%; height: 85vh"
      >
        <el-table-column prop="id" label="ID" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="title" label="标题"> </el-table-column>
        <!-- <el-table-column label="图片" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <img :src="scope.row.imageUrl" style="width: 150px; height: 50px" />
          </template>
        </el-table-column> -->
        <el-table-column label="图片" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <img
              :src="scope.row.watermarkImageUrl"
              style="width: 150px; height: 50px"
            />
          </template>
        </el-table-column>
        <el-table-column prop="linkUrl" label="链接"> </el-table-column>
        <el-table-column prop="sort" label="排序" sortable> </el-table-column>
        <el-table-column prop="gmtCreate" label="创建时间"> </el-table-column>
        <el-table-column prop="gmtModified" label="更新时间"> </el-table-column>
        <el-table-column fixed="right" label="操作" width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="medium" @click="preModify(scope.row)">
              编辑
            </el-button>
            <el-button
              type="text"
              size="medium"
              @click="preModifyWatermark(scope.row)"
            >
              修改水印
            </el-button>
            <!-- <el-button
              type="text"
              size="medium"
              @click="deleteBanner(scope.row.id)"
            >
              删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 100%; text-align: center; margin-top: 10px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          style="float: right"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 新增对话框 -->
    <el-dialog
      title="新增轮播图"
      :visible.sync="addDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="addForm" label-width="80px">
        <el-row>
          <el-form-item label="标题" prop="title">
            <el-input v-model="addForm.title"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="图片" prop="imageUrl">
            <el-upload
              class="upload-demo"
              :action="imgUploadUrl"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleUploadAvatarSuccess"
              :on-exceed="handleExceed"
              :file-list="fileList"
              accept=".jpg, .jpeg, .png, .JPG, .JPEG"
              :limit="1"
              :auto-upload="true"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/jpeg/png文件
              </div>
            </el-upload>
            <el-dialog
              v-if="dialogImageUrl"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="链接" prop="linkUrl">
            <el-input v-model="addForm.linkUrl"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="排序" prop="sort">
            <!-- 数字输入框 -->
            <el-input-number
              v-model="addForm.sort"
              :min="1"
              :max="100"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addBanner">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 编辑对话框 -->
    <el-dialog
      title="修改轮播图"
      :visible.sync="modifyDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form ref="form" :rules="rules" :model="modifyForm" label-width="80px">
        <el-row>
          <el-form-item label="标题" prop="title">
            <el-input v-model="modifyForm.title"></el-input>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="图片" prop="imageUrl">
            <img :src="modifyForm.imageUrl" width="150px" height="50px" />
            <el-upload
              class="upload-demo"
              :action="imgUploadUrl"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleModifyAvatarSuccess"
              :on-exceed="handleExceed"
              accept=".jpg, .jpeg, .png, .JPG, .JPEG"
              :file-list="fileList"
              :limit="1"
              :auto-upload="true"
            >
              <el-button size="small" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">
                只能上传jpg/png/jpeg文件
              </div>
            </el-upload>
            <el-dialog
              v-if="dialogImageUrl"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="链接" prop="linkUrl">
            <el-input v-model="modifyForm.linkUrl"></el-input>
          </el-form-item>
        </el-row>
        <!-- <el-row>
          <el-form-item label="排序" prop="sort">
            <el-input-number
              v-model="modifyForm.sort"
              :min="1"
              :max="100"
              :step="1"
            ></el-input-number>
          </el-form-item>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyDialog = false">取 消</el-button>
        <el-button type="primary" @click="modifyBanner">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 修改水印 -->
    <el-dialog
      title="修改水印"
      :visible.sync="watermarkDialog"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        ref="form"
        :rules="rules"
        :model="watermarkForm"
        label-width="80px"
      >
        <el-row>
          <el-form-item label="文字" prop="watermark">
            <el-input v-model="watermarkForm.watermark" placeholder="可以为空"></el-input>
          </el-form-item>
        </el-row>
        <!-- 颜色选择器 -->
        <el-row>
          <el-form-item label="颜色" prop="color">
            <el-color-picker v-model="color" :predefine="predefineColors">
            </el-color-picker>
          </el-form-item>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="watermarkDialog = false">取 消</el-button>
        <el-button type="primary" @click="modifyWatermark" :loading="watermarkLoading">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getBannerPage,
  addBanner,
  removeBanner,
  modifyBanner,
  modifyWatermark,
} from "@/api/website/banner";
import { mapGetters } from "vuex";
export default {
  name: "BannerList",
  computed: {
    ...mapGetters(["companyId"]),
  },
  data() {
    return {
      color: "#FFFFFF",
      predefineColors: ["#FFFFFF", "#000000", "#FF0000", "#FFA500"],
      bannerList: [],
      watermarkLoading: false,
      addDialog: false,
      modifyDialog: false,
      listLoading: false,
      imgUploadUrl: process.env.BASE_API + "/oss/file/photo",
      addForm: {
        title: "",
        imageUrl: "",
        watermarkImageUrl: "",
        linkUrl: "",
        sort: "",
        companyId: "",
      },
      modifyForm: {
        id: "",
        title: "",
        imageUrl: "",
        watermarkImageUrl: "",
        linkUrl: "",
        sort: "",
      },
      watermarkDialog: false,
      watermarkForm: {
        url: "",
        watermark: "",
        color: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "长度在 2 到 10 个字符",
            trigger: "blur",
          },
        ],
        imageUrl: [{ required: true, message: "请上传图片", trigger: "blur" }],
        linkUrl: [
          { required: false, message: "请输入链接", trigger: "blur" },
          {
            min: 2,
            max: 200,
            message: "长度在 2 到 200 个字符",
            trigger: "blur",
          },
        ],
        sort: [{ required: true, message: "请输入排序", trigger: "blur" }],
        companyId: [
          { required: true, message: "请输入公司id", trigger: "blur" },
        ],
      },
      // 分页
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 上传图片
      dialogImageUrl: "",
      dialogVisible: false,
      fileList: [],
    };
  },
  created() {
    this.getBannerList();
  },
  methods: {
    // 获取轮播图列表
    getBannerList() {
      this.listLoading = true;
      getBannerPage(this.currentPage, this.pageSize)
        .then((res) => {
          this.listLoading = false;
          this.bannerList = res.data.items;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.listLoading = false;
        });
    },
    //预新增
    preAdd() {
      this.addDialog = true;
    },
    // 添加轮播图
    addBanner() {
      this.addForm.companyId = this.companyId;
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.addForm.watermarkImageUrl=this.addForm.imageUrl;
          addBanner(this.addForm)
            .then((res) => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.addDialog = false;
              this.getBannerList();
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },
    // 预修改
    preModify(row) {
      this.modifyDialog = true;
      this.modifyForm = row;
      this.fileList = [];
    },
    //  修改轮播图
    modifyBanner() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          modifyBanner(this.modifyForm)
            .then((res) => {
              this.$message({
                message: "修改成功",
                type: "success",
              });
              this.modifyDialog = false;
              this.getBannerList();
            })
            .catch((err) => {});
        } else {
          return false;
        }
      });
    },
    // 修改水印预处理
    preModifyWatermark(row) {
      this.watermarkDialog = true;
      this.watermarkForm.url = row.imageUrl;
      this.watermarkForm.watermark = "";
      this.modifyForm = row;
    },
    // 修改水印请求
    modifyWatermark() {
      this.watermarkForm.color = this.color;
      this.watermarkLoading = true;
      modifyWatermark(this.watermarkForm)
        .then((res) => {
          this.modifyForm.watermarkImageUrl = res.data.url;
          this.modifyBanner();
          this.watermarkLoading = false;
          this.watermarkDialog = false;
        })
        .catch((err) => {});
    },
    // 删除轮播图
    deleteBanner(id) {
      this.$confirm("此操作将永久删除该轮播图, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          removeBanner(id)
            .then((res) => {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getBannerList();
            })
            .catch((err) => {});
        })
        .catch((_) => {});
    },
    // 页面跳转
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getBannerList();
    },
    // 页面大小
    handleSizeChange(val) {
      this.pageSize = val;
      this.getBannerList();
    },
    // 上传新增图片成功，接受返回的图片地址
    handleUploadAvatarSuccess(res, file) {
      this.addForm.imageUrl = res.data.url;
    },
    // 上传修改图片成功，接受返回的图片地址
    handleModifyAvatarSuccess(res, file) {
      this.modifyForm.imageUrl = res.data.url;
    },
    //超出图片数量限制
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 预览图片
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 关闭图片
    handleRemove(file, fileList) {
      this.addForm.imageUrl = "";
    },
    //关闭对话框
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
</style>